<layout
  th:replace="~{views/layout :: layout (
  page = 'photos',
  title = '图库' ,
  pin = ~{::pin},
  header = ~{::header},
  main = ~{::main}
  )}"
>
  <!--/* pin */-->
  <th:block th:fragment="pin">
    <script id="pageScript" th:inline="javascript">
      Object.assign(window.MainApp.conf, {
        //第一屏
        enable_above: /*[[${theme.config.index.enable_above}]]*/ '',
        above_background: /*[[${theme.config.index.above_background}]]*/ '',
      });
    </script>
  </th:block>


  <!--/* header */-->
  <th:block th:fragment="header">
    <header th:class="${not theme.config.index.enable_above ? 'header dp' : 'header'}">
      <!--/* 导航栏 */-->
      <th:block th:replace="~{views/nav}"/>

      <!--第一屏内容-->
      <section class="above" th:if="${theme.config.index.enable_above}">
        <div class="above-info">
          <h1 class="above-title">图库</h1>
        </div>
      </section>
    </header>
  </th:block>


  <!--/* 內容 */-->
  <th:block th:fragment="main">
    <section class="content ">
      <div class="head card" th:with="noData = ${not #lists.isEmpty(groups)}">
        <div class="title">图库分类</div>
        <div class="groups">
          <th:block th:if="${noData}">
            <a class="groups-item animate__animated " href="/photos">全部</a>
            <a th:each="group : ${groups}" th:text="${group.spec.displayName}" th:href="${'/photos?group=' + group.metadata.name }" th:data-group="${group.metadata.name}" class="groups-item animate__animated "></a>
          </th:block>
          
          <th:block th:unless="${noData}" th:insert="~{views/components:: emptyData(false)}"></th:block>
        </div>

      </div>
      <div class="imgs">
        <img class="img animate__animated animate__bounceIn" th:each="photo : ${photos.items}" th:src="${photo.spec.url}" th:alt="${photo.spec.displayName}">
      </div>
    </section>
    <th:block th:replace="~{views/aside::common}"/>
  </th:block>
</layout>